ادغام WebXR و بینایی کامپیوتر را کاوش کنید. بیاموزید که چگونه تشخیص آنی اشیاء، واقعیت افزوده و مجازی را مستقیماً در مرورگر شما متحول میکند.
پل زدن بین دنیاها: نگاهی عمیق به تشخیص اشیاء در WebXR با استفاده از بینایی کامپیوتر
تصور کنید گوشی هوشمند خود را به سمت گیاهی در یک کشور خارجی نشانه میگیرید و فوراً نام و جزئیات آن را به زبان مادری خود میبینید که در هوا کنار آن شناور است. تکنسینی را تصور کنید که به یک قطعه ماشینآلات پیچیده نگاه میکند و نمودارهای سهبعدی تعاملی از اجزای داخلی آن را مستقیماً بر روی دید خود میبیند. این صحنهای از یک فیلم آیندهنگرانه نیست؛ این واقعیتی است که به سرعت در حال ظهور است و از همگرایی دو فناوری پیشگامانه قدرت میگیرد: WebXR و بینایی کامپیوتر.
دنیاهای دیجیتال و فیزیکی دیگر حوزههای جداگانهای نیستند. واقعیت افزوده (AR) و واقعیت مجازی (VR) که در مجموع به عنوان واقعیت توسعهیافته (XR) شناخته میشوند، در حال ایجاد ترکیبی یکپارچه بین آنها هستند. سالها بود که این تجربیات فراگیر در داخل اپلیکیشنهای بومی محبوس بودند و نیازمند دانلود از فروشگاههای اپلیکیشن و ایجاد مانعی برای کاربران بودند. WebXR این مانع را در هم میشکند و AR و VR را مستقیماً به مرورگر وب میآورد. اما یک پوشش بصری ساده کافی نیست. برای ایجاد تجربیات واقعاً هوشمند و تعاملی، اپلیکیشنهای ما باید دنیایی را که در حال افزودن به آن هستند درک کنند. اینجاست که بینایی کامپیوتر، به ویژه تشخیص اشیاء، وارد تصویر میشود و به اپلیکیشنهای وب ما قدرت بینایی میبخشد.
این راهنمای جامع شما را به سفری به قلب تشخیص اشیاء در WebXR میبرد. ما فناوریهای اصلی را بررسی خواهیم کرد، گردش کار فنی را تشریح میکنیم، کاربردهای تحولآفرین در دنیای واقعی را در صنایع جهانی به نمایش میگذاریم و به چالشها و آینده هیجانانگیز این حوزه نگاهی میاندازیم. چه یک توسعهدهنده، یک رهبر کسبوکار یا یک علاقهمند به فناوری باشید، آماده شوید تا کشف کنید که چگونه وب در حال یادگیری دیدن است.
درک فناوریهای اصلی
قبل از اینکه بتوانیم این دو دنیا را با هم ادغام کنیم، ضروری است که ستونهای بنیادی را که این واقعیت جدید بر روی آنها ساخته شده است، درک کنیم. بیایید اجزای کلیدی را تجزیه کنیم: WebXR و بینایی کامپیوتر.
WebXR چیست؟ انقلاب وب فراگیر
WebXR یک محصول واحد نیست، بلکه گروهی از استانداردهای باز است که امکان اجرای تجربیات فراگیر واقعیت افزوده و واقعیت مجازی را مستقیماً در یک مرورگر وب فراهم میکند. این تکامل تلاشهای قبلی مانند WebVR است که برای پشتیبانی از طیف وسیعتری از دستگاهها، از واقعیت افزوده ساده مبتنی بر گوشی هوشمند گرفته تا هدستهای واقعیت مجازی پیشرفته مانند Meta Quest یا HTC Vive، یکپارچه شده است.
- WebXR Device API: این هسته اصلی WebXR است. این یک API جاوا اسکریپت است که به توسعهدهندگان دسترسی استانداردی به سنسورها و قابلیتهای سختافزار AR/VR میدهد. این شامل ردیابی موقعیت و جهت دستگاه در فضای سهبعدی، درک محیط و رندر مستقیم محتوا بر روی نمایشگر دستگاه با نرخ فریم مناسب است.
- چرا اهمیت دارد: دسترسی و گستردگی: عمیقترین تأثیر WebXR دسترسیپذیری آن است. نیازی نیست کاربر را متقاعد کنید که به یک فروشگاه اپلیکیشن مراجعه کند، منتظر دانلود بماند و یک اپلیکیشن جدید نصب کند. یک کاربر میتواند به سادگی به یک URL برود و فوراً با یک تجربه فراگیر درگیر شود. این به طور چشمگیری مانع ورود را کاهش میدهد و پیامدهای عظیمی برای دسترسی جهانی دارد، به ویژه در مناطقی که دادههای تلفن همراه یک ملاحظه است. یک اپلیکیشن WebXR واحد، در تئوری، میتواند بر روی هر مرورگر سازگار بر روی هر دستگاهی، در هر کجای جهان اجرا شود.
واکاوی بینایی کامپیوتر و تشخیص اشیاء
اگر WebXR پنجرهای به دنیای واقعیت ترکیبی فراهم میکند، بینایی کامپیوتر هوشمندی لازم برای درک آنچه از طریق آن پنجره دیده میشود را فراهم میکند.
- بینایی کامپیوتر: این یک حوزه گسترده از هوش مصنوعی (AI) است که کامپیوترها را برای تفسیر و درک دنیای بصری آموزش میدهد. با استفاده از تصاویر دیجیتال از دوربینها و ویدیوها، ماشینها میتوانند اشیاء را به روشی شبیه به بینایی انسان شناسایی و پردازش کنند.
- تشخیص اشیاء: یک وظیفه خاص و بسیار کاربردی در بینایی کامپیوتر، تشخیص اشیاء فراتر از طبقهبندی ساده تصویر (مثلاً «این تصویر حاوی یک ماشین است») میرود. هدف آن شناسایی این است که چه اشیائی در یک تصویر وجود دارند و کجا قرار دارند، معمولاً با کشیدن یک کادر مرزی (bounding box) در اطراف آنها. یک تصویر واحد ممکن است حاوی چندین شیء شناسایی شده باشد که هر کدام دارای یک برچسب کلاس (مثلاً «شخص»، «دوچرخه»، «چراغ راهنمایی») و یک امتیاز اطمینان هستند.
- نقش یادگیری ماشین: تشخیص اشیاء مدرن توسط یادگیری عمیق، زیرمجموعهای از یادگیری ماشین، قدرت میگیرد. مدلها بر روی مجموعه دادههای عظیمی که حاوی میلیونها تصویر برچسبگذاری شده است، آموزش داده میشوند. از طریق این آموزش، یک شبکه عصبی یاد میگیرد که الگوها، ویژگیها، بافتها و اشکالی را که اشیاء مختلف را تعریف میکنند، تشخیص دهد. معماریهایی مانند YOLO (You Only Look Once) و SSD (Single Shot MultiBox Detector) برای انجام این تشخیصها در زمان واقعی طراحی شدهاند که برای برنامههای ویدیویی زنده مانند WebXR حیاتی است.
نقطه تلاقی: چگونه WebXR از تشخیص اشیاء بهره میبرد
جادوی واقعی زمانی اتفاق میافتد که ما آگاهی فضایی WebXR را با درک متنی بینایی کامپیوتر ترکیب میکنیم. این همافزایی یک پوشش واقعیت افزوده منفعل را به یک رابط فعال و هوشمند تبدیل میکند که میتواند به دنیای واقعی واکنش نشان دهد. بیایید گردش کار فنی را که این امکان را فراهم میکند، بررسی کنیم.
گردش کار فنی: از فید دوربین تا پوشش سهبعدی
تصور کنید در حال ساخت یک اپلیکیشن WebXR هستید که میوههای رایج را روی یک میز شناسایی میکند. در اینجا یک تفکیک گام به گام از آنچه در پشت صحنه اتفاق میافتد، همه در داخل مرورگر، آورده شده است:
- آغاز جلسه WebXR: کاربر به صفحه وب شما میرود و اجازه دسترسی به دوربین خود را برای یک تجربه واقعیت افزوده میدهد. مرورگر، با استفاده از WebXR Device API، یک جلسه AR فراگیر را شروع میکند.
- دسترسی به فید دوربین در زمان واقعی: WebXR یک جریان ویدیویی پیوسته با نرخ فریم بالا از دنیای واقعی که توسط دوربین دستگاه دیده میشود، فراهم میکند. این جریان ورودی مدل بینایی کامپیوتر ما میشود.
- استنتاج روی دستگاه با TensorFlow.js: هر فریم از ویدیو به یک مدل یادگیری ماشین که مستقیماً در مرورگر اجرا میشود، منتقل میشود. کتابخانه پیشرو برای این کار TensorFlow.js است، یک چارچوب منبع باز که به توسعهدهندگان اجازه میدهد مدلهای ML را به طور کامل در جاوا اسکریپت تعریف، آموزش و اجرا کنند. اجرای مدل «روی لبه» (یعنی روی دستگاه کاربر) حیاتی است. این کار تأخیر را به حداقل میرساند - زیرا هیچ رفت و برگشتی به سرور وجود ندارد - و حریم خصوصی را افزایش میدهد، زیرا فید دوربین کاربر نیازی به ترک دستگاه او ندارد.
- تفسیر خروجی مدل: مدل TensorFlow.js فریم را پردازش کرده و یافتههای خود را خروجی میدهد. این خروجی معمولاً یک شیء JSON است که حاوی لیستی از اشیاء شناسایی شده است. برای هر شیء، این موارد را ارائه میدهد:
- یک برچسب
class(مثلاً 'apple', 'banana'). - یک
confidenceScore(مقداری از 0 تا 1 که نشان میدهد مدل چقدر مطمئن است). - یک
bbox(یک کادر مرزی که با مختصات [x, y, width, height] در فریم ویدیوی دوبعدی تعریف شده است).
- یک برچسب
- لنگر انداختن محتوا به دنیای واقعی: این مهمترین مرحله مختص WebXR است. ما نمیتوانیم فقط یک برچسب دوبعدی روی ویدیو بکشیم. برای یک تجربه واقعی AR، محتوای مجازی باید به نظر برسد که در فضای سهبعدی وجود دارد. ما از قابلیتهای WebXR مانند Hit Test API استفاده میکنیم که یک پرتو از دستگاه به دنیای واقعی پرتاب میکند تا سطوح فیزیکی را پیدا کند. با ترکیب مکان کادر مرزی دوبعدی با نتایج hit-testing، میتوانیم یک مختصات سهبعدی روی یا نزدیک شیء واقعی تعیین کنیم.
- رندر کردن محتوای افزوده سهبعدی: با استفاده از یک کتابخانه گرافیک سهبعدی مانند Three.js یا یک چارچوب مانند A-Frame، اکنون میتوانیم یک شیء مجازی (یک برچسب متنی سهبعدی، یک انیمیشن، یک مدل دقیق) را در آن مختصات سهبعدی محاسبه شده قرار دهیم. از آنجا که WebXR به طور مداوم موقعیت دستگاه را ردیابی میکند، این برچسب مجازی با حرکت کاربر در اطراف، به میوه در دنیای واقعی «چسبیده» باقی میماند و یک توهم پایدار و قانعکننده ایجاد میکند.
انتخاب و بهینهسازی مدلها برای مرورگر
اجرای مدلهای یادگیری عمیق پیچیده در یک محیط با منابع محدود مانند مرورگر وب موبایل، یک چالش قابل توجه است. توسعهدهندگان باید یک توازن حیاتی بین عملکرد، دقت و اندازه مدل را مدیریت کنند.
- مدلهای سبک: شما نمیتوانید به سادگی یک مدل عظیم و پیشرفته را که برای سرورهای قدرتمند طراحی شده است، بر روی یک تلفن اجرا کنید. جامعه مدلهای بسیار کارآمدی را به طور خاص برای دستگاههای لبه توسعه داده است. MobileNet یک معماری محبوب است و مدلهای از پیش آموزشدیده مانند COCO-SSD (آموزشدیده بر روی مجموعه داده بزرگ Common Objects in Context) به راحتی در مخزن مدل TensorFlow.js در دسترس هستند و پیادهسازی آنها را آسان میکنند.
- تکنیکهای بهینهسازی مدل: برای بهبود بیشتر عملکرد، توسعهدهندگان میتوانند از تکنیکهایی مانند کوانتیزاسیون (کاهش دقت اعداد در مدل، که اندازه آن را کوچک کرده و محاسبات را سرعت میبخشد) و هرس کردن (حذف بخشهای اضافی شبکه عصبی) استفاده کنند. این مراحل میتوانند به طور چشمگیری زمان بارگذاری را کاهش داده و نرخ فریم تجربه AR را بهبود بخشند و از تجربه کاربری با تأخیر یا لکنت جلوگیری کنند.
کاربردهای واقعی در صنایع جهانی
پایه نظری جذاب است، اما قدرت واقعی تشخیص اشیاء در WebXR در کاربردهای عملی آن آشکار میشود. این فناوری فقط یک چیز جدید و جالب نیست؛ ابزاری است که میتواند مشکلات واقعی را حل کند و در بخشهای متعددی در سراسر جهان ارزش ایجاد کند.
تجارت الکترونیک و خردهفروشی
چشمانداز خردهفروشی در حال تحول دیجیتالی عظیمی است. تشخیص اشیاء در WebXR راهی برای پر کردن شکاف بین خرید آنلاین و فیزیکی ارائه میدهد. یک برند جهانی مبلمان میتواند یک تجربه WebXR ایجاد کند که در آن کاربر تلفن خود را به سمت یک فضای خالی نشانه میگیرد، برنامه کف و دیوارها را تشخیص میدهد و به آنها اجازه میدهد تا یک مبل جدید را در مقیاس در اتاق خود قرار داده و تجسم کنند. فراتر از آن، یک کاربر میتواند دوربین خود را به سمت یک قطعه مبلمان قدیمی موجود بگیرد. برنامه میتواند آن را به عنوان یک «کاناپه دو نفره» شناسایی کند، سپس کاناپههای دو نفره مشابه از نظر سبک را از کاتالوگ شرکت بالا بیاورد تا کاربر بتواند آنها را در جای خود پیشنمایش کند. این یک سفر خرید قدرتمند، تعاملی و شخصیسازی شده را ایجاد میکند که از طریق یک لینک وب ساده قابل دسترسی است.
آموزش و پرورش
آموزش زمانی بسیار جذابتر میشود که تعاملی باشد. یک دانشجوی زیستشناسی در هر کجای جهان میتواند از یک برنامه WebXR برای کاوش یک مدل سهبعدی از قلب انسان استفاده کند. با نشانه گرفتن دستگاه خود به سمت قسمتهای مختلف مدل، برنامه «آئورت»، «بطن» یا «دهلیز» را تشخیص داده و جریان خون متحرک و اطلاعات دقیق را نمایش میدهد. به همین ترتیب، یک مکانیک در حال آموزش برای یک شرکت خودروسازی جهانی میتواند از یک تبلت برای نگاه کردن به یک موتور فیزیکی استفاده کند. اپلیکیشن WebXR اجزای کلیدی را در زمان واقعی شناسایی میکند - دینام، شمعها، فیلتر روغن - و دستورالعملهای تعمیر گام به گام یا دادههای تشخیصی را مستقیماً روی نمای آنها قرار میدهد و آموزش را در کشورها و زبانهای مختلف استاندارد میکند.
گردشگری و فرهنگ
WebXR میتواند نحوه تجربه ما از سفر و فرهنگ را متحول کند. تصور کنید یک توریست از کولوسئوم در رم بازدید میکند. به جای خواندن یک کتاب راهنما، آنها میتوانند تلفن خود را بالا بگیرند. یک برنامه WebXR این بنای تاریخی را تشخیص داده و یک بازسازی سهبعدی از ساختار باستانی در اوج شکوهش را، همراه با گلادیاتورها و جمعیت خروشان، بر روی آن قرار میدهد. در موزهای در مصر، یک بازدیدکننده میتواند دستگاه خود را به سمت یک هیروگلیف خاص روی یک تابوت سنگی نشانه بگیرد؛ برنامه نماد را تشخیص داده و ترجمه فوری و زمینه فرهنگی آن را ارائه میدهد. این یک شکل غنیتر و فراگیرتر از داستانگویی را ایجاد میکند که از موانع زبانی فراتر میرود.
صنعتی و سازمانی
در تولید و لجستیک، کارایی و دقت از اهمیت بالایی برخوردار است. یک کارگر انبار مجهز به عینک AR که یک اپلیکیشن WebXR را اجرا میکند، میتواند به قفسهای از بستهها نگاه کند. سیستم میتواند بارکدها یا برچسبهای بسته را اسکن و تشخیص دهد و جعبه خاصی را که باید برای یک سفارش برداشته شود، برجسته کند. در یک خط مونتاژ پیچیده، یک بازرس تضمین کیفیت میتواند از یک دستگاه برای اسکن بصری یک محصول نهایی استفاده کند. مدل بینایی کامپیوتر میتواند با مقایسه نمای زنده با یک طرح دیجیتال، هرگونه قطعه گمشده یا نقص را شناسایی کند و فرآیندی را که اغلب دستی و مستعد خطای انسانی است، سادهسازی کند.
دسترسپذیری
شاید یکی از تأثیرگذارترین کاربردهای این فناوری در ایجاد ابزارهایی برای دسترسپذیری باشد. یک اپلیکیشن WebXR میتواند به عنوان مجموعهای از چشمها برای یک فرد کمبینا عمل کند. با گرفتن تلفن خود به سمت جلو، برنامه میتواند اشیاء موجود در مسیر آنها را تشخیص دهد - یک «صندلی»، یک «در»، یک «پله» - و بازخورد صوتی در زمان واقعی ارائه دهد و به آنها کمک کند تا محیط خود را با ایمنی و استقلال بیشتری طی کنند. ماهیت مبتنی بر وب به این معنی است که چنین ابزار حیاتی میتواند فوراً برای کاربران در سراسر جهان بهروزرسانی و توزیع شود.
چالشها و مسیرهای آینده
در حالی که پتانسیل بسیار زیاد است، راه رسیدن به پذیرش گسترده بدون مانع نیست. پیش بردن مرزهای فناوری مرورگر، مجموعه منحصربهفردی از چالشها را به همراه دارد که توسعهدهندگان و پلتفرمها به طور فعال برای حل آنها تلاش میکنند.
موانع فعلی برای غلبه
- عملکرد و عمر باتری: اجرای مداوم دوربین دستگاه، GPU برای رندر سهبعدی و CPU برای یک مدل یادگیری ماشین، فوقالعاده منابعبر است. این میتواند منجر به داغ شدن دستگاهها و تخلیه سریع باتریها شود که مدت زمان یک جلسه ممکن را محدود میکند.
- دقت مدل در دنیای واقعی: مدلهایی که در شرایط آزمایشگاهی عالی آموزش دیدهاند، میتوانند در دنیای واقعی با مشکل مواجه شوند. نور ضعیف، زوایای عجیب دوربین، تاری حرکت و اشیاء نیمهپوشیده همگی میتوانند دقت تشخیص را کاهش دهند.
- تکهتکه بودن مرورگرها و سختافزارها: در حالی که WebXR یک استاندارد است، پیادهسازی و عملکرد آن میتواند بین مرورگرها (کروم، سافاری، فایرفاکس) و در سراسر اکوسیستم گسترده دستگاههای اندروید و iOS متفاوت باشد. تضمین یک تجربه سازگار و با کیفیت بالا برای همه کاربران یک چالش بزرگ توسعه است.
- حریم خصوصی دادهها: این برنامهها به دسترسی به دوربین کاربر نیاز دارند که محیط شخصی آنها را پردازش میکند. برای توسعهدهندگان بسیار مهم است که در مورد دادههایی که پردازش میشوند شفاف باشند. ماهیت روی دستگاه TensorFlow.js در اینجا یک مزیت بزرگ است، اما با پیچیدهتر شدن تجربیات، سیاستهای حفظ حریم خصوصی واضح و رضایت کاربر غیرقابل مذاکره خواهد بود، به ویژه تحت مقررات جهانی مانند GDPR.
- از درک دوبعدی به سهبعدی: بیشتر تشخیصهای اشیاء فعلی یک کادر مرزی دوبعدی ارائه میدهند. محاسبات فضایی واقعی به تشخیص اشیاء سهبعدی نیاز دارد - نه تنها درک اینکه یک جعبه یک «صندلی» است، بلکه ابعاد، جهت و موقعیت دقیق سهبعدی آن در فضا. این یک مشکل به مراتب پیچیدهتر است و مرز اصلی بعدی را نشان میدهد.
راه پیش رو: آینده بینایی در WebXR چیست؟
آینده روشن است و چندین روند هیجانانگیز آماده حل چالشهای امروزی و باز کردن قابلیتهای جدید هستند.
- XR به کمک ابر: با راهاندازی شبکههای 5G، مانع تأخیر در حال کاهش است. این راه را برای یک رویکرد ترکیبی باز میکند که در آن تشخیص سبک و در زمان واقعی روی دستگاه اتفاق میافتد، اما یک فریم با وضوح بالا میتواند برای پردازش توسط یک مدل بسیار بزرگتر و قدرتمندتر به ابر ارسال شود. این میتواند امکان تشخیص میلیونها شیء مختلف را فراهم کند، بسیار فراتر از آنچه میتوان در یک دستگاه محلی ذخیره کرد.
- درک معنایی: تکامل بعدی حرکت از برچسبگذاری ساده به درک معنایی است. سیستم فقط یک «فنجان» و یک «میز» را تشخیص نخواهد داد؛ بلکه رابطه بین آنها را درک خواهد کرد - اینکه فنجان روی میز است و میتواند پر شود. این آگاهی متنی تعاملات AR بسیار پیچیدهتر و مفیدتری را امکانپذیر میکند.
- ادغام با هوش مصنوعی مولد: تصور کنید دوربین خود را به سمت میز کار خود نشانه میگیرید و سیستم صفحهکلید و مانیتور شما را تشخیص میدهد. سپس میتوانید از یک هوش مصنوعی مولد بپرسید: «یک چیدمان ارگونومیکتر به من بده» و ببینید که اشیاء مجازی جدیدی در فضای شما تولید و مرتب میشوند تا یک طرح ایدهآل را به شما نشان دهند. این تلفیق تشخیص و ایجاد، پارادایم جدیدی از محتوای تعاملی را باز خواهد کرد.
- ابزارسازی و استانداردسازی بهبود یافته: با بالغ شدن اکوسیستم، توسعه آسانتر خواهد شد. چارچوبهای قدرتمندتر و کاربرپسندتر، تنوع گستردهتری از مدلهای از پیش آموزشدیده بهینهسازی شده برای وب، و پشتیبانی قویتر مرورگر، نسل جدیدی از سازندگان را برای ساخت تجربیات وب فراگیر و هوشمند توانمند خواهد کرد.
شروع کار: اولین پروژه تشخیص اشیاء WebXR شما
برای توسعهدهندگان مشتاق، مانع ورود کمتر از آن چیزی است که فکر میکنید. با چند کتابخانه کلیدی جاوا اسکریپت، میتوانید آزمایش با بلوکهای سازنده این فناوری را آغاز کنید.
ابزارها و کتابخانههای ضروری
- یک چارچوب سهبعدی: Three.js استاندارد بالفعل برای گرافیک سهبعدی در وب است که قدرت و انعطافپذیری فوقالعادهای را ارائه میدهد. برای کسانی که رویکردی اعلانیتر و شبیه به HTML را ترجیح میدهند، A-Frame یک چارچوب عالی است که بر روی Three.js ساخته شده و ایجاد صحنههای WebXR را فوقالعاده ساده میکند.
- یک کتابخانه یادگیری ماشین: TensorFlow.js انتخاب اصلی برای یادگیری ماشین در مرورگر است. این کتابخانه دسترسی به مدلهای از پیش آموزشدیده و ابزارهایی برای اجرای کارآمد آنها را فراهم میکند.
- یک مرورگر و دستگاه مدرن: شما به یک گوشی هوشمند یا هدست نیاز دارید که از WebXR پشتیبانی کند. اکثر گوشیهای اندرویدی مدرن با کروم و دستگاههای iOS با سافاری سازگار هستند.
یک راهنمای مفهومی سطح بالا
در حالی که یک آموزش کامل کدنویسی فراتر از محدوده این مقاله است، در اینجا یک طرح کلی ساده از منطقی که در کد جاوا اسکریپت خود پیادهسازی میکنید، آورده شده است:
- راهاندازی صحنه: صحنه A-Frame یا Three.js خود را مقداردهی اولیه کرده و یک جلسه WebXR از نوع 'immersive-ar' درخواست کنید.
- بارگذاری مدل: به صورت ناهمزمان یک مدل تشخیص اشیاء از پیش آموزشدیده، مانند `coco-ssd` از مخزن مدل TensorFlow.js را بارگذاری کنید. این ممکن است چند ثانیه طول بکشد، بنابراین باید یک نشانگر بارگذاری به کاربر نشان دهید.
- ایجاد یک حلقه رندر: این قلب برنامه شماست. در هر فریم (ایدهآل ۶۰ بار در ثانیه)، شما منطق تشخیص و رندر را انجام خواهید داد.
- تشخیص اشیاء: در داخل حلقه، فریم ویدیوی فعلی را بگیرید و آن را به تابع `detect()` مدل بارگذاری شده خود منتقل کنید.
- پردازش تشخیصها: این تابع یک promise را برمیگرداند که با آرایهای از اشیاء شناسایی شده حل میشود. در این آرایه حلقه بزنید.
- قرار دادن محتوای افزوده: برای هر شیء شناسایی شده با امتیاز اطمینان به اندازه کافی بالا، باید کادر مرزی دوبعدی آن را به یک موقعیت سهبعدی در صحنه خود نگاشت کنید. میتوانید با قرار دادن یک برچسب در مرکز کادر شروع کنید و سپس آن را با استفاده از تکنیکهای پیشرفتهتر مانند Hit Test اصلاح کنید. مطمئن شوید که موقعیت برچسبهای سهبعدی خود را در هر فریم بهروزرسانی کنید تا با حرکت شیء شناسایی شده مطابقت داشته باشد.
آموزشها و پروژههای آماده متعددی به صورت آنلاین از جوامعی مانند تیمهای WebXR و TensorFlow.js در دسترس است که میتواند به شما کمک کند تا به سرعت یک نمونه اولیه کاربردی را راهاندازی کنید.
نتیجهگیری: وب در حال بیدار شدن است
ادغام WebXR و بینایی کامپیوتر چیزی بیش از یک کنجکاوی فناورانه است؛ این نشاندهنده یک تغییر اساسی در نحوه تعامل ما با اطلاعات و دنیای اطرافمان است. ما در حال حرکت از یک وب صفحات و اسناد مسطح به یک وب تجربیات فضایی و آگاه از زمینه هستیم. با دادن توانایی دیدن و درک به اپلیکیشنهای وب، ما در حال گشودن آیندهای هستیم که در آن محتوای دیجیتال دیگر به صفحههای ما محدود نمیشود، بلکه به طور هوشمندانه در تار و پود واقعیت فیزیکی ما تنیده شده است.
این سفر تازه آغاز شده است. چالشهای عملکرد، دقت و حریم خصوصی واقعی هستند، اما جامعه جهانی توسعهدهندگان و محققان با سرعتی باورنکردنی در حال مقابله با آنها هستند. ابزارها در دسترس هستند، استانداردها باز هستند، و کاربردهای بالقوه فقط توسط تخیل ما محدود میشوند. تکامل بعدی وب اینجاست - فراگیر است، هوشمند است و همین حالا، در مرورگر شما در دسترس است.